<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <style>
        img {
            width: 50px;
        }
    </style>


</head>

<body>
    <div id="bar" style="width:1000px; height:600px;"></div>

    <div id="counter">
        <p v-for>Counter: {{ message }}</p>
        <button v-on:click="reversed">按鈕提交</button>
        <button v-on:click="abc">圖表</button>

        <div v-if="data_status">
            <p v-for="i in data_list">
                <span>{{i.author}}</span>
                <img :src="i.pic">
            </p>
        </div>
    </div>


    <script>
        var chart = echarts.init(document.getElementById('bar'), 'black', { renderer: 'canvas' });
        $(
            function () {
                fetchData(chart);
            }
        );
        const Counter = {
            data() {
                return {
                    message: 'Hello Vue.js!',
                    'bar': "",
                    data_status: true,
                    data_list: [
                        { 'author': "小姐", 'age': 20 },
                        { 'author': "小姐1", 'age': 20 },
                        { 'author': "小姐2", 'age': 20 },
                    ]
                }
            },
            beforeMount() {
                // 创建阶段（初始化相关属性）：beforeCreate()、created()
                // 挂载前阶段：beforeMount()、onBeforeMount()
                // 挂载后阶段：mounted()、onMounted()
                var that = this
                $.ajax({
                    //1.指定向那个后端发送ajax请求
                    url: 'http://127.0.0.1:8000/index',//不写就是向当前地址提交请求
                    //2.请求方式需要指定
                    type: 'get', //不指定默认get,小写即可。
                    //3.数据,自定义对象
                    data: {

                    },
                    //4.异步回调机制,回调函数：当后端返回结果是会自动触发，arg接收后端的返回结果
                    success: function (args) {
                        that.data_list = args.data
                        console.log(args);
                    }
                })

            },
            methods: {
                abc() {
                    $.ajax({
                        //1.指定向那个后端发送ajax请求
                        url: 'http://127.0.0.1:8000/abc',//不写就是向当前地址提交请求
                        //2.请求方式需要指定
                        type: 'get', //不指定默认get,小写即可。
                        //3.数据,自定义对象
                        data: {

                        },
                        //4.异步回调机制,回调函数：当后端返回结果是会自动触发，arg接收后端的返回结果
                        dataType: 'json',
                        success: function (args) {
                            chart.setOption(args.data);
                            console.log(args.data)
                        }
                    })
                }
            }
        }

        Vue.createApp(Counter).mount('#counter')
    </script>

</body>

</html>